import React, { PureComponent } from 'react';
import { connect } from 'dva';
import "./form.less"
import "../../Common.less"
import { worker } from "../../utils/worker"
import { Form, Input, Select, Radio, TreeSelect } from 'antd';
class CusPropsEdit extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            propTypeList: [],
            partList: [],
            visibleList: [],
            effictiveList: []
        }
        this.onConfirm = this.onConfirm.bind(this)
        this.treeSelect = this.treeSelect.bind(this)
    }
    onConfirm(params = {}) {
        return new Promise((resolve, reject) => {
            this.props.form.validateFields((error, values) => {

                if (!error) {
                    values.propertyConstraint = {}
                    let { required, precision, min, max, regExp,sid } = values
                    Object.assign(values.propertyConstraint, { required, precision, min, max, regExp ,id:sid})
                    if (JSON.stringify(values.propertyConstraint) == "{}") {
                        values.propertyConstraint = null
                    }
                    if (this.props.extra.mode == 'add') {
                        this.props.addCusProps(values, res => {

                            if (params.onSuccess) {
                                params.onSuccess(res);
                            }
                            if (this.props.refresh) {
                                this.props.refresh()
                            }
                            resolve()
                            if (params.onSuccess) {
                                params.onSuccess(res);
                            }
                        }, err => {
                            if (params.onError) {
                                params.onError(err);
                            }
                            reject()
                        })
                    } else {
                        this.props.editCusProps(values, res => {

                            if (params.onSuccess) {
                                params.onSuccess(res);
                            }
                            if (this.props.refresh) {
                                this.props.refresh()
                            }
                            resolve()
                        }, err => {
                            if (params.onError) {
                                params.onError(err);
                            }
                            reject()
                        })
                    }
                }else{
                    if (params.onError) {
                        params.onError('err');
                    }
                    reject()
                }

            })
        })

    }
    treeSelect(e, a) {
        const { extra } = this.props;
        extra.definitionTreeName = a.props.parentName
        extra.definitionTreeId = a.props.id
        extra.parentId = a.props.parentId
    }
    async componentDidMount() {
        let { dictlist, extra, form ,onLoaded} = this.props;
        if (onLoaded) {
           onLoaded(this);
        }
      
        let res = await this.props.getCateTree({})
        let resc = await worker.loopTreeNode3(res, null, true,true)
        if (resc) {
            this.setState({
                expandedKeys: resc.map(item => String(item.key)),
                treeData: resc
            })
        }
        if (extra && extra.code == "add") {
            this.setState({
                definitionPartId: extra.definitionTreeId + ''
            })
            form.setFieldsValue({
                definitionPartId: extra.definitionTreeId + '',
                definitionTreeId: extra.parentId
            })
        } else {
            form.setFieldsValue(extra.propData)
        }
        this.setState({
            isShowList: dictlist.filter(item => item.dictType == "is_show"),
            isEffectiveList: dictlist.filter(item => item.dictType == "is_effective"),
            isRequiredList: dictlist.filter(item => item.dictType == "is_required"),
            propertyTypeList: dictlist.filter(item => item.dictType == "property_type"),
            unitList: dictlist.filter(item => item.dictType == "unit"),
            isCalculateList: dictlist.filter(item => item.dictType == "is_calculate"),
        })

    }
    render() {
        const { form, extra } = this.props;
        const { getFieldDecorator } = form;
        const { isShowList, isEffectiveList, isRequiredList, propertyTypeList, unitList, isCalculateList, treeData } = this.state
        return (
            <Form
                style={{ marginTop: "20px" }}
                labelAlign="right"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 18 }}
            >

                <Form.Item className="half" label='属性名称'>
                    {getFieldDecorator('key', {
                        rules: [
                            { required: true, message: '属性名称' }
                        ],
                        initialValue: extra.mode == 'edit' && extra.propData ? extra.propData.key : null
                    })(
                        <Input disabled={extra.mode == 'edit'} placeholder="请输入属性名称" />
                    )}
                </Form.Item>
                <Form.Item className="half" label='属性标识'>
                    {getFieldDecorator('name', {
                        rules: [
                            { required: true, message: '属性标识' }
                        ],
                        initialValue: extra.mode == 'edit' && extra.propData ? extra.propData.name : null
                    })(
                        <Input placeholder="请输入属性标识" />
                    )}
                </Form.Item>
                <Form.Item className="half" label='属性类型'>
                    {getFieldDecorator('type', {
                        rules: [
                            { required: true, message: '属性类型' }
                        ],
                        initialValue: extra.mode == 'edit' && extra.propData ? extra.propData.type - 0 : 66
                    })(
                        <Select placeholder="请选择属性类型">
                            {
                                propertyTypeList && propertyTypeList.length ? propertyTypeList.map(item => {
                                    return (
                                        <Select.Option value={item.id} key={item.id}>{item.dictLabel}</Select.Option>
                                    )
                                }) : undefined
                            }

                        </Select>
                    )}
                </Form.Item>
                <Form.Item className="half" label='用于计算'>
                    {getFieldDecorator('isCalculate', {
                        rules: [
                            { required: true, message: '是否用于计算' }
                        ],
                        initialValue: extra.mode == 'edit' && extra.propData ? extra.propData.isCalculate : null
                    })(
                        <Select placeholder="请选择是否用于计算">
                            {
                                isCalculateList && isCalculateList.length ? isCalculateList.map(item => {
                                    return (
                                        <Select.Option value={item.id} key={item.id}>{item.dictLabel}</Select.Option>
                                    )
                                }) : undefined
                            }

                        </Select>
                    )}
                </Form.Item>
                <Form.Item className="half" label='默认值'>
                    {getFieldDecorator('defaultValue', {
                        rules: [
                            { required: true, message: '默认值' }
                        ],
                        initialValue: extra.mode == 'edit' && extra.propData ? extra.propData.defaultValue : null
                    })(
                        <Input placeholder="请输入默认值" />
                    )}
                </Form.Item>
                <Form.Item className="half" label='单位'>
                    {getFieldDecorator('unit', {
                        rules: [
                            { required: true, message: '单位' }
                        ],
                        initialValue: extra.mode == 'edit' && extra.propData ? extra.propData.unit - 0 : null
                    })(
                        <Select placeholder="请选择单位">
                            {
                                unitList && unitList.length ? unitList.map(item => {
                                    return (
                                        <Select.Option value={item.id} key={item.id}>{item.dictLabel}</Select.Option>
                                    )
                                }) : undefined
                            }

                        </Select>
                    )}
                </Form.Item>
                <Form.Item className="half" label='所属结构'>
                    {getFieldDecorator('definitionTreeName', {
                        rules: [
                            { required: true, message: '所属结构' }
                        ],
                        initialValue: extra.mode == 'edit' && extra.propData ? extra.propData.definitionTreeName : extra.definitionTreeName
                    })(
                        <Input disabled placeholder="所属结构" />
                    )}
                </Form.Item>

                {
                    treeData && extra ? <Form.Item className="half" label='所属部位'>
                        {getFieldDecorator('definitionPartId', {
                            rules: [
                                { required: true, message: '所属部位' }
                            ],
                            initialValue: extra.mode == 'edit' && extra.propData ? String(extra.propData.definitionPartId) : String(extra.definitionTreeId)
                        })(
                            <TreeSelect
                                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                                placeholder="请选择构件"
                                treeData={treeData}
                                onSelect={this.treeSelect}
                                treeDefaultExpandAll
                            ></TreeSelect>
                        )}

                    </Form.Item> : undefined
                }

                <Form.Item className="half" label='是否可见'>
                    {getFieldDecorator('isShow', {
                        rules: [
                            { required: true, message: '是否可见' }
                        ],
                        initialValue: extra.mode == 'edit' && extra.propData ? extra.propData.isShow : 70
                    })(
                        <Select placeholder="请选择是否可见">
                            {
                                isShowList && isShowList.length ? isShowList.map(item => {
                                    return (
                                        <Select.Option value={item.id} key={item.id}>{item.dictLabel}</Select.Option>
                                    )
                                }) : undefined
                            }

                        </Select>
                    )}
                </Form.Item>
                <Form.Item className="half" label='是否有效'>
                    {getFieldDecorator('isEffective', {
                        rules: [
                            { required: true, message: '是否有效' }
                        ],
                        initialValue: extra.mode == 'edit' && extra.propData ? extra.propData.isEffective : 72
                    })(
                        <Select placeholder="请选择是否有效">
                            {
                                isEffectiveList && isEffectiveList.length ? isEffectiveList.map(item => {
                                    return (
                                        <Select.Option value={item.id} key={item.id}>{item.dictLabel}</Select.Option>
                                    )
                                }) : undefined
                            }

                        </Select>
                    )}
                </Form.Item>
                <div className="half"></div>
                <Form.Item labelCol={{ span: 3 }}
                    wrapperCol={{ span: 18 }} style={{ 'width': "100%", float: 'none', overflow: 'hidden' }} label='约束'>
                    {getFieldDecorator('propertyConstraint', {
                        rules: [
                            { required: false, message: '约束' }
                        ],
                    })(
                        <Form
                            style={{ marginTop: "35px", border: '1px solid #ececec', padding: "15px" }}
                            labelAlign="right"
                            className="innerForm"
                            labelCol={{ span: 3 }}
                            wrapperCol={{ span: 21 }}

                        >
                            <Form.Item style={{ 'marginBottom': '0', width: "100%" }} label='是否必要'>
                                {getFieldDecorator('required', {
                                    rules: [
                                        { required: false, message: '是否必要' }
                                    ],
                                    initialValue: extra.mode == 'edit' && extra.propData && extra.propData.propertyConstraint ? extra.propData.propertyConstraint.required : null
                                })(
                                    <Radio.Group>
                                        {
                                            isRequiredList && isRequiredList.length ? isRequiredList.map((item, index) => {
                                                return (
                                                    <Radio.Button key={item.id} value={item.id}>{item.dictLabel}</Radio.Button>
                                                )
                                            }) : undefined
                                        }

                                    </Radio.Group>,
                                )}
                            </Form.Item>
                            <Form.Item style={{ 'marginBottom': '0', width: "100%" }} label='小数位数'>
                                {getFieldDecorator('precision', {
                                    rules: [
                                        { required: false, message: '小数位数' }
                                    ],
                                    initialValue: extra.mode == 'edit' && extra.propData && extra.propData.propertyConstraint ? extra.propData.propertyConstraint.precision : null
                                })(
                                    <Input placeholder="小数位数" />
                                )}
                            </Form.Item>
                            <Form.Item style={{ 'marginBottom': '0', width: "100%" }} label='最小值'>
                                {getFieldDecorator('min', {
                                    rules: [
                                        { required: false, message: '最小值' }
                                    ],
                                    initialValue: extra.mode == 'edit' && extra.propData && extra.propData.propertyConstraint ? extra.propData.propertyConstraint.min : null
                                })(
                                    <Input placeholder="最小值" />
                                )}
                            </Form.Item>
                            <Form.Item style={{ 'marginBottom': '0', width: "100%" }} label='最大值'>
                                {getFieldDecorator('max', {
                                    rules: [
                                        { required: false, message: '最大值' }
                                    ],
                                    initialValue: extra.mode == 'edit' && extra.propData && extra.propData.propertyConstraint ? extra.propData.propertyConstraint.max : null
                                })(
                                    <Input placeholder="最大值" />
                                )}
                            </Form.Item>
                            <Form.Item style={{ 'marginBottom': '0', width: "100%" }} label='正则规则'>
                                {getFieldDecorator('regExp', {
                                    rules: [
                                        { required: false, message: '正则规则' }
                                    ],
                                    initialValue: extra.mode == 'edit' && extra.propData && extra.propData.propertyConstraint ? extra.propData.propertyConstraint.regExp : null
                                })(
                                    <Input placeholder="正则规则" />
                                )}
                            </Form.Item>
                            <Form.Item className="hide" style={extra.mode == 'add'?{display:'none'}:{ 'marginBottom': '0', width: "100%" }} label='sid'>
                                {getFieldDecorator('sid', {
                                    rules: [
                                        { required: false, message: 'sid' }
                                    ],
                                    initialValue: extra.mode == 'edit' && extra.propData && extra.propData.propertyConstraint ? extra.propData.propertyConstraint.id : null
                                })(
                                    <Input placeholder="sid" />
                                )}
                            </Form.Item>
                        </Form>
                    )}
                </Form.Item>
                <Form.Item className="half" label='备注'>
                    {getFieldDecorator('remark', {
                        rules: [
                            { required: false, message: '备注' }
                        ],
                        initialValue: extra.mode == 'edit' && extra.propData ? extra.propData.remark : null
                    })(
                        <Input placeholder="备注"></Input>
                    )}
                </Form.Item>
                {
                    extra.mode != 'add' ? <Form.Item className="half hide" style={extra.mode == 'add' ? { display: 'none' } : {}} label='id'>
                        {getFieldDecorator('id', {
                            rules: [
                                { required: true, message: 'id' }
                            ],
                            initialValue: extra.mode == 'edit' && extra.propData ? extra.propData.id : null
                        })(
                            <Input placeholder="请输入属性名称" />
                        )}
                    </Form.Item> : undefined
                }
                <Form.Item className="half hide" style={extra.mode == 'add' ? { display: 'none' } : {}} label='所属结构'>
                    {getFieldDecorator('definitionTreeId', {
                        rules: [
                            { required: true, message: '所属结构' }
                        ],
                        initialValue: extra.mode == 'edit' && extra.propData ? extra.propData.definitionTreeId : extra.parentId
                    })(
                        <Input disabled placeholder="所属结构" />
                    )}
                </Form.Item>
                <div className="half">

                </div>
            </Form>
        )
    }
}
export default connect(
    ({ dict: { dictlist } }) => ({
        dictlist
    }),
    dispatch => ({
        addCusProps: (values, onSuccess, onError) => dispatch({
            type: 'cusProps/addCusProps',
            payload: {
                values, onSuccess, onError
            }
        }),
        getCateTree: (values) => dispatch({
            type: 'structure/getCateTree',
            payload: values
        }),
        editCusProps: (values, onSuccess, onError) => dispatch({
            type: 'cusProps/editCusProps',
            payload: {
                values, onSuccess, onError
            }
        }),
    })
)(Form.create('cusPropsEdit', {

})(CusPropsEdit));